import type { ColumnsType, TableProps } from 'antd/es/table';
import React, { createRef, useState, useEffect } from 'react';
import { Table, Button, Select, Row } from 'myselfantd';
// import { getList } from '../api';
interface DataType {
  code: number;
  name: string;
  type: string;
  value: number;
  unit: number;
  duration: number;
  remark: string;
  editable: boolean;
}
interface Props {
  data?: any;
  type?: any;
  title?: any;
  onFinish: Function;
  close: Function;
  viewmode?: 'view' | 'add' | 'edit';
}
const App = (props: Props) => {
  let { data, type, close, onFinish, viewmode } = props;
  const [fields, setFields] = useState(data);
  const [units, setUnits] = useState<any>([]);
  // useEffect(() => {
  //   getList({}).then(({ result }: any) => {
  //     setUnits(result);
  //   });
  // }, []);
  return (
    <>
      <Table.Form
        onChange={(val: any) => {
          setFields(val);
        }}
        value={fields}
        scroll={{ scrollToFirstRowOnChange: true, y: 200 }}
        pagination={{
          locale: {
            page: '页',
          },
          showTotal: (total: any) => `共 ${total} 条数据`,
        }}
        columns={[
          {
            title: '序号',
            dataIndex: 'sortkey',
            onCell: (record: any) => {
              return {
                filed: 'sortkey',
                record,
              };
            },
          },
          {
            title: '参数名称',
            dataIndex: 'name',
            showSorterTooltip: false,
            width: 120,
            onCell: (record: DataType) => {
              return {
                editable: true,
                filed: 'name',
                record,
                rules: [
                  {
                    required: true,
                    message: `参数名称必填`,
                  },
                ],
              };
            },
          },
          {
            title: '参数编号',
            dataIndex: 'code',
            showSorterTooltip: false,
            width: 120,
            onCell: (record: DataType) => ({
              editable: true,
              filed: 'code',
              record,
              rules: [
                {
                  required: true,
                  message: `参数编号必填`,
                },
              ],
            }),
          },
          {
            title: '参数值',
            dataIndex: 'value',
            showSorterTooltip: false,
            width: 120,
            onCell: (record: DataType) => ({
              editable: true,
              filed: 'value',
              record,
              rules: [
                {
                  required: true,
                  message: `参数值必填`,
                },
              ],
            }),
          },
          {
            title: '参数单位',
            dataIndex: 'unitId',
            showSorterTooltip: false,
            width: 200,
            onCell: (record: DataType) => ({
              editable: true,
              filed: 'unitId',
              record,
              rules: [
                {
                  required: true,
                  message: `参数单位必填`,
                },
              ],
              render: () => (
                <Select
                  fieldNames={{ name: 'name', value: 'id' }}
                  request={async () => {
                    return units;
                  }}
                  placeholder="参数单位"
                  allowClear={false}
                />
              ),
            }),
            render: (id: any) => {
              return units.find((item: any) => item.id === id)?.name;
            },
          },
        ]}
        createRowData={
          viewmode === 'add'
            ? (val: any) => {
                return { name: '', code: '', value: '', unitId: '' };
              }
            : false
        }
      />
      <Row justify="end">
        <Button
          type="primary"
          onClick={() => {
            onFinish(fields);
          }}
          style={{ marginRight: '20px' }}
        >
          保存
        </Button>
        <Button type="default" onClick={() => close()}>
          取消
        </Button>
      </Row>
    </>
  );
};

export default App;
